<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/9/13
  Time: 20:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            margin: auto;
        }
        #myid{
            width: 500px;
            height: 320px;
            background-color: rgb(235, 235, 235);
        }
        #myid h1{
            font-family: '仿宋';
            text-align: center;
        }
        #myid label{
            width: 100px;
            height: 20px;
            display: inline-block;
            text-align: right;
            font-size: 14px;
            margin-bottom: 10px;
            margin-left: 20px;
        }
        #myid span{
            font-size: 12px;
        }
        #myid div{
            display: inline-block;
            width: 180px;
            height: 20px;
            color: red;
            font-size: 12px;
            margin-left: 5px;
            /*border: 1px solid red;*/
        }
        #myid #t1{
            margin-top: 20px;
        }
        [type=submit]{
            width: 100px;
            height: 30px;
            background-color: pink;
            border: 1px solid pink;
            color: #fff;
            margin-left: 120px;
        }
        [type=reset]{
            width: 100px;
            height: 30px;
            background-color: pink;
            border: 1px solid pink;
            color: #fff;
            margin-left: 10px;
        }
    </style>
</head>
<body>
<form action="doRegister.jsp" method='post' onsubmit='return seek()'>
    <div id='myid'>
        <h1>用户注册</h1>
        <label for="#">用户名：</label>
        <input type="text" id='t1' name="userNum">
        <div id='d1'></div>
        <br>
        <label for="#">密码：</label>
        <input type="password" id='t2' name="userPass">
        <div id='d2'></div>
        <br>
        <label for="#">用户名：</label>
        <input type="text" id='t3' name="userName">
        <div id='d3'></div>
        <br>
        <label for="#">性别：</label>
        <input type="radio" name='gen' id='t4' value="男"><span>男</span>
        <input type="radio" name='gen' id='t5' value="女"><span>女</span>
        <div id='d4'></div>
        <br>
        <label for="#">电子邮件地址：</label>
        <input type="text" id='t6'>
        <div id='d5'></div>
        <br>
        <label for="#">当前年龄：</label>
        <input type="text" id='t7' name = "age">
        <div id='d6'></div>
        <br>
        <input type="submit" value='注册' id='sub'>
        <input type="reset" value='清除' id='res'>
    </div>
</form>
</body>
<script>
    function $(id){
        return document.getElementById(id);
    }
    function seek(){
        $('d1').innerHTML='';
        var seek1=$("t1").value;
        if(seek1==''){
            $('d1').innerHTML='用户名不能为空';
            return false;
        }else{
            $('d1').innerHTML='';
        }

        $("d2").innerHTML='';
        var seek2=$("t2").value;
        if(seek2==''){
            $("d2").innerHTML='密码不能为空';
            return false;
        }else{
            $('d2').innerHTML='';
        }

        $("d4").innerHTML='';
        var seek4=$("t4").checked;
        var seek5=$("t5").checked;
        if(seek4==false&&seek5==false){
            $("d4").innerHTML='此项必填';
            return false;
        }else{
            $('d4').innerHTML='';
        }

        $("d5").innerHTML='';
        var seek6=$("t6").value;
        if(seek6==''){
            $("d5").innerHTML='电子邮箱地址不能为空';
            return false;
        }else if(seek6.indexOf("@")==-1){
            $("d5").innerHTML='格式错误，必须有@符号';
            return false;
        }else if(seek6.indexOf(".")==-1){
            $("d5").innerHTML='格式错误，必须有.符号';
            return false;
        }else{
            $('d5').innerHTML='';
        }

        $('d6').innerHTML='';
        var seek7=$("t7").value;
        if(seek7==''){
            $('d6').innerHTML='年龄不能为空';
            return false;
        }else{
            $('d6').innerHTML='';
        }
    }
</script>
</html>
